<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery/jquery-3.7.1.js"></script>
    <script>
        function toLogin() {
            $.ajax({
                url: 'user', //servlet地址
                type: 'POST',
                data: {
                    type: 'login',
                    username: $("input[name='username']").val(),
                    password: $("input[name='password']").val()
                },
                success: function (res) {
                    console.log(res)
                    // 要根据res结果的code（状态码来判断我们做什么）
                    if (res.code === 200) {
                        location.href = "success.html"
                    } else {
                        alert(res.msg)
                    }
                },
                error: function (error) {
                    console.log(error)
                }
            })
        }
    </script>
</head>
<body>
<!-- 表单默认提交方式，仅仅只是发一个请求，根据servlet的结果响应到页面 -->
<!-- 没有办法实现网页的局部更新 -->
<!-- 应该使用Ajax异步请求 -->
<form action="toLogin" method="post">
    账号：<input type="text" name="username"><br>
    密码：<input type="text" name="password"><br>
    <!-- button标签的type属性，选择为button的时候，跟form表单脱离关系 -->
    <button type="button" onclick="toLogin()">登录</button>
</form>
</body>
</html>